<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="法律设置"
               :modal="false"
               class="user-dialog add-or-updata"
               width="35%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div v-loading="dataListLoading">
        <el-button icon="el-icon-plus"
                   type="primary"
                   plain
                   class="width-100"
                   v-if="$hasPermission('tb:law:addLawFile')"
                   @click="addLaw">添加法律文件</el-button>
        <div class="Law-box">
          <div class="Law-itme"
               v-for="(item,index) of lawList"
               :key="index">
            <el-input v-model.trim="item.name"
                      class="Law-input"
                      @change="inputChange($event,index)"
                      placeholder="请输入内容"></el-input>
            <el-button type="text"
                       class="danger"
                       v-if="$hasPermission('tb:law:delLawFile')"
                       @click="deleteLaw(index,item.id)">删除</el-button>
            <template v-if="$hasPermission('tb:law:updateLawFile')">
              <el-button type="text"
                         class="brand"
                         v-show="item.id"
                         @click="saveLaw(index,item)">修改</el-button>
            </template>
            <template v-if="$hasPermission('tb:law:addLawFile')">
              <el-button type="text"
                         class="brand"
                         v-show="!item.id"
                         @click="saveLaw(index,item)">保存</el-button>
            </template>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getLawFileAllURL: '/tb/law/getLawFileAll', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '/tb/law/addLawFile', // 添加或修改接口，API地址
        updateURL: '/tb/law/updateLawFile', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '/tb/law/delLawFile', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      lawList: [],
      input: '',
      visible: false,
      dataForm: {}
    }
  },
  methods: {
    closeDialog () {
      this.$emit('callBack')
      this.visible = false
    },
    init (data) {
      this.lawList = []
      this.visible = true
      this.getLawFileAll()
    },
    inputChange (val, index) {
      if (val.length > 50) {
        this.lawList.splice(index, 1, {
          name: ''
        })
        this.$message.warning('长度不能长于50个字')
      }
    },
    getLawFileAll () {
      this.getData({ url: this.mixinViewModuleOptions.getLawFileAllURL }).then(res => {
        if (res.code !== 0) {
          return false
        }

        this.lawList.splice(0, this.lawList.length, ...res.data)
      })
    },
    // 添加法律
    addLaw () {
      this.lawList.unshift({
        name: ''
      })
    },
    // 删除法律
    deleteLaw (index, id) {
      if (id) {
        this.deleteHandle({ id }).then(res => {
          if (res.code !== 0) {
            return false
          }
          this.lawList.splice(index, 1)
        })
      } else {
        this.lawList.splice(index, 1)
      }
    },
    // 表单提交
    saveLaw: debounce(function (index, item) {
      const name = this.lawList[index].name
      if (name === '') {
        return
      }
      item.name = name
      const url = item.id ? this.mixinViewModuleOptions.updateURL : this.mixinViewModuleOptions.addURL
      this.addOrUpdateItem({
        url,
        paramData: {
          ...item
        }
      }).then(res => {
        if (res.code !== 0) {
          return false
        }
        this.getLawFileAll()
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss" scoped>
.Law-box {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  .Law-itme {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .Law-input {
      margin-right: 20px;
    }
  }
}
</style>
